<template>
    <div>
        <div v-for="(item, index) in orderData" :key="index" class="all-order-item">
            <div class="order-top" >
                {{ item.orderState }}
            </div>
            <div class="order-container" @click="orderClick(item)">
                <img :src="item.productUrl" style="width: 100px; float: left" />
                <div style="display: flex; justify-content: space-between">
                    <div>
                        <el-tooltip effect="light" :content="item.productName" placement="top">
                            <p class="line-hidden">
                                {{ item.productName }}
                            </p>
                        </el-tooltip>
                        <p style="font-size: 0.5rem">
                            {{ item.productSpecs }}
                        </p>
                    </div>
                    <div>
                        <p style="font-size: 1rem">×{{ item.payPrice }}</p>
                        <p style="font-size: 0.5rem">×{{ item.payAmount }}</p>
                    </div>
                </div>
            </div>
            <div class="order-footer">
                <el-button size="mini" v-if="item.orderState === '待付款'" @click="
                    payment(item)
                ">商品付款</el-button>
                <el-button size="mini" v-if="item.orderState === '已发货'" @click="receiveGoods(item.orderId)">确认收货
                </el-button>
                <el-button size="mini" v-if="item.orderState === '已拒绝'" @click="service()">联系客服</el-button>
                <!-- <el-button v-if="item.orderState === '待付款'" size="mini" type="danger" slot="reference"
                    @click="cancelOrder(item.orderId, item.orderTime)">取消订单</el-button> -->
                <el-button v-if="item.orderState === '待处理'" disabled size="mini" type="danger" slot="reference">等待处理
                </el-button>
                <el-button v-if="item.orderState === '允许退货'" size="mini" type="primary" slot="reference"
                    @click="sendBack(scope.$index)">上门取件</el-button>
                <el-button v-if="item.orderState === '待收货'" size="mini" disabled type="warning" slot="reference">退货中
                </el-button>
                <el-button size="mini" disabled type="success" v-if="item.orderState === '退货完成'">退货完成</el-button>
                <el-button size="mini" type="primary" v-if="item.orderState === '已收货'" @click="review(item)">评价</el-button>
                <el-button v-if="
                    item.orderState === '已发货' ||
                    item.orderState === '已收货' ||
                    item.orderState === '已评价'
                " size="mini" type="danger" slot="reference" @click="applyReturn(item)">申请退货</el-button>
                <el-button v-if="item.orderState === '待发货'" size="mini" type="primary" slot="reference" @click="applyReturn(item)">申请退款</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        orderData: {
            type: Array,
            default:[]
        },
        
    },
    methods: {
        orderClick(item){
            this.$emit("orderClick",item)
            
        },
        receiveGoods(val){
            this.$emit("receiveGoods",val)
        },
        payment(item){
            // console.log("222")
            this.$emit("payment",item)
        },
        service(){
            this.$emit("service")
        },
        cancelOrder(orderId,orderTime){
            this.$emit("cancelOrder",orderId,orderTime)
        },
        sendBack(val){
            this.$emit("sendBack",val)
        },
        review(item){
            this.$emit("review",item)
        },
        applyReturn(item){
            this.$emit("applyReturn",item)
        },

    }
}
</script>

<style lang="less" scoped>
.all-order-item {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  background: #fff;
  width: calc(100% - 10px);
  height: 200px;
  margin: 0 0 15px 0;
  padding: 0 5px;
  border-radius: 5px;
}
.all-order-item .order-top {
  // float: right;
}

 .all-order-item .order-container {
  // float: left;
  margin: 10px 0;
}

.line-hidden {
  // width: 80px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  /* 这里是超出几行省略 */
  overflow: hidden;
}
.order-footer{
    padding: 0px 20px;
    text-align: right;
}
</style>